<template>
      <div class="container">
            <div class="closeBtn" >
                <span onclick="window.history.go(-1)" class="iconfont iconicon-test"></span>
            </div>
            <div class="logo">
                    <span class="iconfont iconnew"></span>
            </div>
            <!-- 用户名 -->
            <MyInput
            errMsg="昵称格式错误"
            :rule='/^\d{3,12}$/'
            type="text" 
            placeholder="请输入昵称" 
            @Setvalue='setUserName'
             />
            <!-- 密码 -->
            <MyInput
            errMsg="用户名格式错误"
            :rule='/^\d{3,12}$/'
            type="text" 
            placeholder="请输入用户名"
            @Setvalue='setNickName'
            />
            <MyInput 
            errMsg="密码格式错误"
            :rule='/^\d{3,12}$/'
            type="password"
            placeholder="再次确认密码"
            @Setvalue='setPassWord'
            />
            <Btn @click="register" btnText='注册' />
            <!-- @click.native是声明原生click -->
      </div>
</template>

<script>
import MyInput from '../components/MyInput';
import Btn from '../components/Btn'
export default {
   components:{
       MyInput,
       Btn
   },
   data(){
        return{
        UserName:'',
        NickName:'',
        PassWord:'',
        }
   },
   methods:{
        setUserName(newval){
            this.UserName=newval
        },
        setNickName(newval){
            this.NickName=newval
        },
        setPassWord(newval){
            this.PassWord=newval
        },
        register(){
            this.$axios({
                method:'post',
                url:'/register',
                data:{
                  username:this.UserName,
                  nickname:this.NickName,
                  password:this.PassWord,
                }
            }).then(res=>{
                console.log(res.data);
                if(res.data.message==='注册成功'){
                    this.$toast('注册成功')
                }
            })
        }
   }
}
</script> 

<style lang='less'>
@import url('http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css');
    *{
        padding: 0;
        margin: 0;
    }
    a{
        text-decoration: none;
    }
    
    body,html{
        width: 100%;
        height: 100%;
        background-color: #f2f2f2;
    }
    .container{
        padding: 20/360*100vw;
    }
    .closeBtn{
            .iconfont{
                font-size: 30/360*100vw;
            }
        }
    .logo{
        height: 100/360*100vw;
        text-align: center;
        
        .iconnew{
            font-size: 100/360*100vw;
            line-height:100/360*100vw ;
            color: #cc3300;
        }
    }
    // .unm{
    //     height: 60/360*100vw;
    //     #username{
    //         line-height: 40/360*100vw;
    //         width: 100%;
    //         font-size: 16/360*100vw;
    //         outline: none;
    //         border: none;
    //         border-bottom: 1px solid gray;
    //         background-color: #f2f2f2;
    //     }
    // }
    // .psd{
    //     height: 60/360*100vw;
    //     #password{
    //         line-height: 40/360*100vw;
    //         width: 100%;
    //         font-size: 16/360*100vw;
    //         outline: none;
    //         border: none;
    //         border-bottom: 1px solid gray;
    //         background-color: #f2f2f2;
    //     }
    // }
</style>